<template>
  <view class="normal-login-container top-flex">

    <search placeholder="请输入车牌号/车架号" @input="inputChange" class="search-flex">

      <view class="flex right20 align-center" slot="right" >


        <uni-icons type="tune" :color="isAllEmpty(conditionParam)?'#333':'#1890FF'" size="25" @click="conditionClick"></uni-icons>

        <uni-icons v-if="checkPermi(['GPSManage:GPSWorkOrder:add'])" type="plus-filled" color="#1890FF" size="30" @click="goAdd"></uni-icons>

      </view>
<!--      <uni-tag :inverted="false" style="margin-right: 20rpx" slot="right" v-if="checkPermi(['GPSManage:GPSWorkOrder:add'])" text="新增" type="primary" @click="goAdd"></uni-tag>-->
    </search>

    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" class="mescroll-flex">
      <view class="item-wrap" v-for="(item,index) in list" :key="index" @click="goDetail(item)">

        <view class="title-wrap lineBottom10">
          <text>{{ item.vinNo || '' }}</text>
          <dict-tag
            :options="dict.type.gps_workorder_type"
            show-tag
            :value="item.workOrderType"/>
        </view>

        <view class="flex-row align-stretch">
          <view v-if="checkPermi(['GPSManage:GPSWorkOrder:batchhandle']) && item.workOrderType==12 && (item.workOrderStatus==1 || '退回到发起人' == item.auditStatus)"
                class="flex-row sel-wrap" @click.stop="itemSel(item)">
            <uni-icons color="#1890FF" :type="item.check?'checkbox-filled':'circle'" size="20"></uni-icons>
          </view>
          <view class="flex-col flex1">
            <view class="text-line">
              <text class="text-name">车牌号:</text>
              <text class="text-value">{{ item.carNo|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">品牌车系车型:</text>
              <text class="text-value">{{ item.brandName|filterNull }}/{{ item.seriesName|filterNull }}/{{ item.modelName|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">车辆归属公司:</text>
              <text class="text-value">{{ item.ascription|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">客户名称:</text>
              <text class="text-value">{{ item.customerName|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">产品类型:</text>
              <dict-tag
                :options="dict.type.quota_rent_type"
                :value="item.contractType"/>
            </view>
            <view class="text-line">
              <text class="text-name">采购禀议编号:</text>
              <text class="text-value">{{ item.procurementReportNumber|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">GPS工单编号:</text>
              <text class="text-value">{{ item.workOrderCode|filterNull }}</text>
            </view>
            <view class="text-line">
              <text class="text-name">工单创建时间:</text>
              <text class="text-value">{{ item.createTime|filterNull }}</text>
            </view>
          </view>
        </view>



<!--        工单状态(1.未处理 2.处理中 3.已完成)-->
        <view class="btn-wrap lineTop20" v-if="(item.workOrderStatus == 1 || '退回到发起人' == item.auditStatus) && checkPermi(['GPSManage:GPSWorkOrder:handle'])">
            <button size="mini" type="primary" @click.stop="goHandle(item)">处理</button>
        </view>

      </view>
    </mescroll-body>

    <view class="button-container" v-if="checkPermi(['GPSManage:GPSWorkOrder:batchhandle'])">
      <view class="flex-row">
        <label class="radio" @click="selAll">
          <uni-icons color="#1890FF" :type="allSel?'checkbox-filled':'circle'" size="20"></uni-icons>
          全选</label>
      </view>

      <button class="btn-item" @click="goBatchAdd">批量处理</button>
    </view>

    <condition-search ref="search" v-model="conditionParam" @confirm="conditionConfirm"></condition-search>

  </view>
</template>

<script>
import {gpslist} from "@/api/gps/gpsList";
import ConditionSearch from "@/pages/CarPage/gps/components/conditionSearch.vue";

export default {
  components: {ConditionSearch},
  dicts: ["gps_workorder_type", "quota_rent_type"],
  data() {
    return {
      list: [],
      carNoVinNo: null,
      allSel:false,
      conditionParam:null
    }
  },
  watch:{
    list:{
      deep:true,
      handler(val){
        if(val && val.length){
          const resList = val.filter(item=>item.workOrderType==12 && (item.workOrderStatus==1 || '退回到发起人' == item.auditStatus))
          if(resList && resList.length){
            let everyCheck = resList.every(item=>item.check===true);
            this.allSel = everyCheck
          }else {
            this.allSel = false
          }
        }
      }
    }
  },
  onLoad() {
    uni.$on('refreshGps', call=>{
      this.mescroll.triggerDownScroll();
    })
  },
  methods: {
    isAllEmpty(val){
      if(this.isEmpty(val)){
        return true
      }
      if(val.constructor === Object){
        for(const key in val){
          if(val.hasOwnProperty(key) && val[key] !== null){
            return false;
          }
        }
        return true;
      }
      return false
    },
    conditionClick(){
      this.$refs.search.open()
    },
    conditionConfirm(val){
      this.mescroll.resetUpScroll();
    },
    itemSel(item){
      item.check = !item.check;
    },
    selAll(){
      this.allSel=!this.allSel;
      this.list.forEach(item=>{
        item.check = this.allSel;
      })
    },
    inputChange(val){
      this.carNoVinNo = val;
      this.mescroll.triggerDownScroll();
    },

    upCallback(page) {
      var params = {
        ...this.conditionParam,
        carNoVinNo: this.carNoVinNo,
        pageNum: page.num,
        pageSize: page.size
      }
      gpslist(params).then(res => {
        //设置列表数据
        if (page.num == 1) this.list = []; //如果是第一页需手动制空列表

        res.rows.forEach(item=>{
          item.check=false
        })

        this.list = this.list.concat(res.rows); //追加新数据
        this.mescroll.endBySize(res.rows.length, res.total);
      }).catch(() => {
        //联网失败, 结束加载
        this.mescroll.endErr();
      })
    },
    goBatchAdd(){
      const resList = this.list.filter(item=>item.workOrderType==12 && (item.workOrderStatus==1 || '退回到发起人' == item.auditStatus))
      if(resList && resList.length){
        let checkList = resList.filter(item=>item.check===true);
        if(checkList && checkList.length){

          const dum = checkList.find(item=>{
            return item.contractReportNumber !== checkList[0].contractReportNumber || item.customerName !== checkList[0].customerName
          })

          if(dum){
            this.$modal.msg("同一订单号且同一客户才能批量处理")
            return;
          }

          //跳转批量新增
          let carIds = checkList.map(item => item.carId).join(",");
          this.jump(12, carIds, true)
        }else {
          this.$modal.msg("请选择要批量处理的数据")
        }
      }else {
        this.$modal.msg("请选择要批量处理的数据")
      }
    },
    goAdd() {
      this.$tab.navigateTo('/pages/CarPage/gps/add')
    },
    goDetail(item) {
      if(item.workOrderStatus == 2 || item.workOrderStatus == 3){
        this.jump(item.workOrderType, item.carId, false)
      }else {
        this.$modal.msg("未处理无法查看详情")
      }
    },
    goHandle(item) {
      this.jump(item.workOrderType, item.carId, true)
    },
    jump(workOrderType, carIds, isAdd){
      let path;
      switch (workOrderType){
        case 12:
          path = "install";
          break
        case 13:
          path = "renewal";
          break
        case 14:
          path = "fix";
          break
        case 15:
          path = "remove";
          break
        case 17:
          path = "check";
          break
      }
      let url = `/pages/CarPage/gps/${path}?state=${isAdd?'write':'detail'}&carIds=${carIds}`
      this.$tab.navigateTo(url);
    },
  }
}
</script>

<style lang="scss" scoped>

.radio{
  display: flex;
  align-items: center;
  font-size: 26rpx;
  margin-left: 10rpx;
}
.sel-wrap{
  padding: 0 0 0 10rpx;
}

/deep/ .uni-date__x-input{
  font-size: 24rpx;
  height: 60rpx;
  line-height: 60rpx;
}
/deep/ .uni-date-x .range-separator {
  height: 60rpx;
  line-height: 60rpx;
}

.top-flex {
  display: flex;
  flex-direction: column;

  .search-flex {
    position: sticky;
    z-index: 99999;
    top: 0
  }

  .mescroll-flex {
    margin-bottom: 100rpx;
  }
}
</style>
